<template>
  <div class="custom-card" :class="[`card-${type}`, { 'card-hover': hover }]">
    <div class="card-header" v-if="$slots.header || title">
      <slot name="header">
        <h3 class="card-title">{{ title }}</h3>
      </slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
    <div class="card-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title?: string
  type?: 'default' | 'primary' | 'success' | 'warning' | 'info'
  hover?: boolean
}

withDefaults(defineProps<Props>(), {
  type: 'default',
  hover: true
})
</script>

<style scoped>
.custom-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.custom-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bg-gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-primary::before {
  background: var(--bg-gradient-primary);
}

.card-success::before {
  background: var(--bg-gradient-success);
}

.card-warning::before {
  background: var(--bg-gradient-warning);
}

.card-info::before {
  background: var(--bg-gradient-info);
}

.custom-card:hover::before {
  opacity: 1;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.card-header {
  padding: 1.5rem 1.5rem 0;
}

.card-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid #f3f4f6;
  margin-top: 1rem;
  padding-top: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .custom-card {
    border-radius: 12px;
  }
  
  .card-header,
  .card-body,
  .card-footer {
    padding: 1rem;
  }
  
  .card-title {
    font-size: 1.1rem;
  }
}
</style> 